<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		li {
			list-style: none;
		}

		.box {
			color: red;
		}
	</style>
</head>

<body>
	<!-- 自己添加的属性就是自定义属性 -->
	<ul id="ul">
		<li class="">1</li>
		<li>2</li>
		<li>3</li>
	</ul>

	<div class="box" id="box">我是盒子</div>

	<script>
		var ulObj = document.getElementById('ul')
		var olObj = ulObj.children
		var boxObj = document.getElementById('box')

		for (var i = 0; i < olObj.length; i++) {
			//设置自定义属性
			olObj[i].setAttribute("data-come", (i + 1) * 1)
			//点击每个li来获取自定义属性


			olObj[i].onclick = function () {
				var date = this.getAttribute('data-come')
				console.log(date)
				var remove = this.removeAttribute('data-come')
			}
		}

		box.onclick = function () {
			// this.className = ""
			this.removeAttribute('class')
		}
	</script>
</body>

</html>